<template>
  <section class="sp-login">
    <section class="sp-login__form">
      <div class="sp-login__logo">欢迎登录</div>
      <el-form :model="ruleForm" :rules="ruleslist" ref="ruleForm">
        <el-form-item prop="loginId">
          <el-input
            v-model.trim="ruleForm.loginId"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名/17338135336"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model.trim="ruleForm.password"
            prefix-icon="el-icon-lock"
            placeholder="请输入密码/123456"
            show-password
            @keyup.enter="submitForm"
          />
        </el-form-item>
        <el-form-item>
          <el-link :underline="false" type="info">Tips : 请不要把用户名轻易泄露给他人！</el-link>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" ref="password" @click="submitForm">
            登录
          </el-button>
        </el-form-item>
      </el-form>
      <div class="sp-login__copy">
        <el-link type="primary">ICP备: xxxxx号</el-link>
      </div>
    </section>
  </section>
</template>

<script>
import cookie from "js-cookie";
import bus from '@/common/bus'
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        loginId: "",
        password: "",
      },
      ruleslist: {
        loginId: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "密码必须是6-16位", trigger: ["blur", "change"] },
        ]
      },
      loading: false
    }
  },
  methods: {
    closeLoading() {
      this.tableLoading.close();
    },
    showLoading() {
      this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // debugger
          this.showLoading();
          const redirect = this.$route.query?.redirect ? this.$route.query.redirect : "/";
          this.$axios.getemployeeLogin({
            account: this.ruleForm.loginId,
            password: this.ruleForm.password,
          }).then((res) => {
              this.closeLoading();
              console.log(res);
              bus.$emit("message", res.data.positionId);
              if (res.code == "00000") {
                cookie.set("Xd_Token", res.data.token);
                this.$router.replace(redirect);
                localStorage.setItem('employeesInformation', JSON.stringify(res.data))
                localStorage.setItem("ms_u", JSON.stringify({name: res.data.userInfo}))
                localStorage.setItem('Xd_Token', res.data.token)
                localStorage.setItem('baseUrl', 'http://h501.ktgj.com')
                // localStorage.setItem('baseUrl', 'http://106.38.39.187:9000')
              } else {
                this.$message.error("账号或密码错误");
              }
            });
        }
      })
    }
  }
}
</script>
